let dragRect // 记录元素的位置
function bindSideBarDrag(elementId, rect, sideWidth, isHorizontal = true) {
  const dragPointer = document.getElementById(elementId);
  // 鼠标按下给document添加事件
  dragPointer.onmousedown = e => {
    e.preventDefault();
    dragRect = rect
    document.addEventListener('mousemove', mousemove);
    document.addEventListener('mouseup', mouseup);
  }

  // 鼠标弹起时移出事件
  function mouseup() {
    document.removeEventListener('mousemove', mousemove);
    document.removeEventListener('mouseup', mouseup);
  }

  /**
   * 鼠标移动时修改宽度（限制最大范围）
   */
  function mousemove(e) {
    if (isHorizontal) {
      const minLeft = e.clientX - dragRect.x - 3; //  拖动条宽度的一半 5，让鼠标始终在拖动条的最中间
      const minRight = dragRect.width - minLeft;
      if (minLeft > 250 && minRight > 250) {
        sideWidth.value = minLeft;
      }
    } else {
      const minTop = e.clientY - dragRect.y - 3;
      const minBottom = dragRect.height - minTop;
      if (minTop > 150 && minBottom > 150) {
        sideWidth.value = minTop;
      }
    }
  }
}

export default bindSideBarDrag